<template>
  <div class="timing">
    <el-row v-show="false" style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="角色名称">
            <el-input v-model="formInline.name" placeholder="" />
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserRolesList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser"><Icon type="md-add" />新增</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <httb ref="httbRef" width="340" 
    :btn-is-show="{'operate':true,'del':true,'power':true}" 
    :table-col="tabUserList" :table-data="tableUserData" 
    @deleteSelectData="deleteSelectData" 
    @refresh="getUserRolesList" 
    @editAdminFun="goToGroupEditPage" />
    <!-- 分页 -->
    <div v-show="false" style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <editdialog ref="editdialog" @refresh="getUserRolesList" />

    <!-- 权限配置 -->
    <editModalPerm ref="editModalPermShow" :data="editModalPermData" />
  </div>
</template>

<script>
import { getRoleList, delRole } from '@/api/home_'
import editdialog from './components/editDialog.vue'
import editModalPerm from './components/editModalPerm'
export default {
  components: {
    editdialog, editModalPerm
  },
  data() {
    return {
      formInline: {
        name: ''
      },
      tableUserData: [],
      tabUserList: [
        {
          key: 'roleName',
          title: '角色名称 '
        },
        {
          key: 'updateTime',
          title: '更新时间'
        },
        {
          key: 'status',
          title: '状态'
        },
        {
          key: 'remark',
          title: '备注信息'
        }
      ],
      editModalPermData: {},
      total: 0,
      size: 10,
      page: 1
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserRolesList()
    })
  },
  methods: {
    deleteSelectData(v) {
      delRole({ role_id: v.roleId }).then(res => {
        if (res.code == 200) {
          this.getUserRolesList()
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    goToGroupEditPage(val) {
      this.$refs.editModalPermShow.showDialog(val)
      this.editModalPermData = val.row && val.row.id ? val.row : {}
    },
    addUser() {
      this.$refs.editdialog.setVal('add')
    },
    editRowData(v) {
      this.$refs.editdialog.setVal(v)
    },
    handleSizeChange() {},
    handleCurrentChange() {},
    // 用户角色列表
    getUserRolesList() {
      getRoleList({}).then(res => {
        this.tableUserData = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .timing{
    background:#fff;
    padding:20px;
  }
</style>
